<template>
  <div class="item border-top">
    <div class="flex-left">
      <div class="text">{{ text }}</div>
      <div class="booking">
        <span class="iconfont">&#xe811;</span>{{ booking }}
      </div>
      <div class="labels">
        <span v-for="(label, index) in labels"
          :key="index"
          class="label border">
          {{ label }}
        </span>
      </div>
      <div class="supplier">
        <span>{{ supplier }}</span>
        <span>预订须知<span class="iconfont">&#xe62d;</span></span>
      </div>
    </div>
    <div class="flex-right">
      <div class="price">
        ￥<span class="price-num">{{ price }}</span>
      </div>
      <div class="btn-booking" @click="bookingTicket">预订</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailListItem',
  props: {
    ticketInfo: Object
  },
  computed: {
    text () {
      return this.ticketInfo.text
    },
    booking () {
      return this.ticketInfo.booking
    },
    labels () {
      return this.ticketInfo.labels
    },
    supplier () {
      return this.ticketInfo.supplier
    },
    price () {
      return this.ticketInfo.price
    }
  },
  methods: {
    bookingTicket () {
      console.log('预订门票，开发中...')
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/variables.styl'
  .item
    display flex
    font-size .24rem
    padding .2rem
    color #616161
    .flex-left
      flex 2.92
      .text
        font-size .3rem
      .booking
        line-height .4rem
        .iconfont
          font-size .24rem
          color $bgColor
      .labels
        height .4rem
        line-height .4rem
        .label
          padding .04rem
          color $bgColor
      .supplier
        height .4rem
        line-height .4rem
        .iconfont
          font-size .24rem
    .flex-right
      flex 1
      display flex
      flex-direction column
      justify-content center
      text-align center
      .price
        color $highlightTextColor
        .price-num
          font-size .4rem
      .btn-booking
        line-height .6rem
        font-size .28rem
        border-radius .1rem
        color #fff
        background-image linear-gradient(130deg, #ffab1e 37%, #ff8c12 100%)
</style>
